<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fc-angular</title>
  <!-- <base href="/"> -->

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="./favicon.ico">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    a,
    address,
    article,
    aside,
    audio,
    b,
    blockquote,
    body,
    br,
    button,
    canvas,
    caption,
    center,
    col,
    dd,
    dir,
    div,
    dl,
    dt,
    fieldset,
    figcaption,
    figure,
    font,
    footer,
    form,
    frame,
    frameset,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    head,
    header,
    hr,
    i,
    iframe,
    img,
    input,
    label,
    legend,
    li,
    nav,
    ol,
    option,
    p,
    pre,
    samp,
    section,
    select,
    small,
    span,
    strong,
    table,
    tbody,
    td,
    textarea,
    tfoot,
    th,
    thead,
    title,
    tr,
    ul,
    video {
      font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }

    /* 加载条 */

    .container-process {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .spinner {
      position: fixed;
      width: 60px;
      height: 60px;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      margin-top: -30px;
    }

    .container1>div,
    .container2>div,
    .container3>div {
      width: 16px;
      height: 16px;
      background-color: #d3d3d3;
      border-radius: 100%;
      position: absolute;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
      animation: bouncedelay 1.2s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .spinner .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .container2 {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }

    .container3 {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }

    .circle1 {
      top: 0;
      left: 0;
    }

    .circle2 {
      top: 0;
      right: 0;
    }

    .circle3 {
      right: 0;
      bottom: 0;
    }

    .circle4 {
      left: 0;
      bottom: 0;
    }

    .container2 .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .container3 .circle1 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    .container1 .circle2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .container2 .circle2 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    .container3 .circle2 {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }

    .container1 .circle3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .container2 .circle3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .container3 .circle3 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .container1 .circle4 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .container2 .circle4 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .container3 .circle4 {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }

    @-webkit-keyframes bouncedelay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0.0)
      }

      40% {
        -webkit-transform: scale(1.0)
      }
    }

    @keyframes bouncedelay {

      0%,
      80%,
      100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      }

      40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      box-shadow: 0 0 0px 1000px white inset !important;
      background-color: rgb(0, 0, 0) !important;
      background-image: none !important;
      color: rgb(0, 0, 0) !important;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }

  </style>
</head>

<body>
  <app-root>
    <div class="container-process">
      <div class="spinner">
        <div class="spinner-container container1">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
      </div>
    </div>
  </app-root>
<script src="runtime-es2015.js" type="module"></script><script src="polyfills-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule></script><script src="polyfills-es5.js" nomodule></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule></script><script src="scripts.js"></script><script src="vendor-es2015.js" type="module"></script><script src="main-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule></script><script src="main-es5.js" nomodule></script></body>

</html>
